<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../../base.jsp" %>
<!DOCTYPE html>
<html>

<head>
    <base href="${ctx}/">
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>数据 - AdminLTE2定制版</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 页面meta /-->
    <link rel="stylesheet" href="plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="plugins/ztree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="plugins/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="plugins/ztree/js/jquery.ztree.excheck-3.5.js"></script>

    <SCRIPT type="text/javascript">
        <!--
        var setting = {  //设置
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        //数据部分
        /**
         * name : 显示的数据
         * checked:true 默认勾选
         * open: true  默认打开
         * id : 表示当前的数据的id 随便写
         * pId : parentId  父级菜单的id  如果pid找不到  会提升为一级菜单
         *      如果当前的内容下有子内容 父菜单自动转换成文件夹
         * @type {*[]}
         * [ {} , {} , {key:value,key:value}] json
         */
        /*var zNodes =[
            { id:11, pId:1, name:"随意勾选 1-1", checked :true,open:true},
            { id:111, pId:11, name:"随意勾选 1-1-1"},
            { id:112, pId:11, name:"随意勾选 1-1-2"},

            { id:12, pId:1, name:"随意勾选 1-2", open:true},
            { id:121, pId:12, name:"随意勾选 1-2-1"},
            { id:122, pId:12, name:"随意勾选 1-2-2"},
            { id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
            { id:21, pId:2, name:"随意勾选 2-1"},

            { id:22, pId:2, name:"随意勾选 2-2", open:true},
            { id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
            { id:222, pId:22, name:"随意勾选 2-2-2"},

            { id:23, pId:2, name:"随意勾选 2-3"},
            { id:1, pId:0, name:"随意勾选 1", open:true},
            { id:33333, pId:1234567, name:"saas管理", open:true},
            { id:12345, pId:33333, name:"模块管理", open:true}
        ];*/
        var zNodes;
        //页面初始化
        $(document).ready(function(){
            //发送ajax 请求 获得菜单的数据部分
            $.get("/system/role/initTree.do?roleid=${role.id}", function(data){
                //响应json串
                zNodes = data;

                //ztree 初始化
                // 参数1: 给谁初始化  设置是什么
                // 参数2: setting 设置
                // 参数3: 表示json数据部分
                //init 初始化 : 构建树型菜单
                treeObj  = $.fn.zTree.init( $("#treeDemo") , setting,  zNodes);

                //展开所有节点
                treeObj.expandAll(true);
            });
        });
        //-->
        var treeObj;
        //json是ajax返回的 不能用\${} request域数据 请求转发返回的  获得数据使用\${}
    </SCRIPT>

    <script>
        //提交数据
        function submitCheckedNodes(){
            //1.获得role_id
            //2.获得选中的模块id
            var myCheckedNodes = treeObj.getCheckedNodes(true);//获得选中的节点
            //alert(myCheckedNodes.length)
            console.log(myCheckedNodes); //浏览器控制台日志

            //准备拼接的字符串
            var moduleIds = "";
            //遍历
            for(var i = 0 ;i < myCheckedNodes.length ; i ++){
                //alert(  myCheckedNodes[i].id );  //获得选择的模块id数据 ,将数据放入表单中
                //<input type="hidden" id="moduleIds" name="moduleIds" value=""/>
                moduleIds+=  myCheckedNodes[i].id +",";
            }
            //去掉最后的逗号
            if(moduleIds.length!= 0){
                //substr( 从哪开始截取 , 截取多少位长度);
                moduleIds = moduleIds.substr( 0 , moduleIds.length -1 );
            }
            console.log(moduleIds);
            //放入隐藏域
            document.getElementById("moduleIds").value = moduleIds;
            //表单提交
            //document.getElementById("icform").submit();
            document.forms[0].submit();//forms当前页面中所有的form表单  [0] 表示第一个表单
        }
    </script>
</head>

<body style="overflow: visible;">
<div id="frameContent" class="content-wrapper" style="margin-left:0px;height: 1200px" >
    <section class="content-header">
        <h1>
            菜单管理
            <small>菜单列表</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="all-admin-index.html"><i class="fa fa-dashboard"></i> 首页</a></li>
        </ol>
    </section>
    <!-- 内容头部 /-->

    <!-- 正文区域 -->
    <section class="content">

        <!-- .box-body -->
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">角色 [${role.name}] 权限列表</h3>
            </div>

            <div class="box-body">

                <!-- 数据表格 -->
                <div class="table-box">
                    <!--工具栏-->
                    <div class="box-tools text-left">
                        <button type="button" class="btn bg-maroon" onclick="submitCheckedNodes();">保存</button>
                        <button type="button" class="btn bg-default" onclick="history.back(-1);">返回</button>
                    </div>
                    <!--工具栏/-->
                    <!-- 树菜单 -->
                    <form name="icform" id="icform" method="post" action="/system/role/updateRoleModule.do">
                        <input type="hidden" name="roleid" value="${role.id}"/>
                        <input type="hidden" id="moduleIds" name="moduleIds" value=""/>
                        <div class="content_wrap">
                            <div class="zTreeDemoBackground left" style="overflow: visible">
                                <ul id="treeDemo" class="ztree"></ul>
                            </div>
                        </div>

                    </form>
                    <!-- 树菜单 /-->

                </div>
                <!-- /数据表格 -->

            </div>
            <!-- /.box-body -->
        </div>
    </section>
</div>
</body>
</html>